<!-- 活动详情 -->
<template>
	<view class="container">
		<view class="c-rich">
			<view class="rich-content" style="height:calc(100vh - 140rpx)">
				<mp-html :content="activeInfo.content" />
			</view>

			<view class="rich-btn">
				<view @click="onApply" v-if="activeInfo.is_apply==1">
					<text>活动报名</text>
				</view>
				<view v-else-if="activeInfo.is_apply==0">
					<text>限制报名</text>
				</view>
				<view v-else-if="activeInfo.is_apply==2">
					<text>已报名</text>
				</view>
			</view>
		</view>
		<u-modal :show="isModal" title="活动报名必要信息录入" showCancelButton @confirm="modalConfirm" @cancel="modalCancel">
			<view class="modal">
				<text>参与人数：</text>
				<u-input placeholder="填写参与活动人数" v-model="num" type="number"></u-input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "gameDetail",
		data() {
			return {
				num: '',
				isModal: false,
				// 赛事详情
				activeInfo: {},
				richContent: null
			}
		},
		onLoad(query) {
			this.getRecommendActiveDetail(query.id)
		},
		methods: {
			modalConfirm() {
				if (this.num && this.num != 0) {
					this.$http.activeApply({
						activity_id: this.activeInfo.id,
						person_nums:this.num
					}).then(res => {
						uni.$u.toast("您已成功报名本次活动！")
						this.activeInfo.is_apply = 2
						this.isModal = false
					})
				} else {
					uni.$u.toast("请填写报名人数")
				}

			},
			modalCancel() {
				this.isModal = false
			},
			// 获取赛事详情
			getRecommendActiveDetail(id) {
				this.$http.getRecommendActiveDetail({
					id
				}).then(res => {
					this.activeInfo = res

				})
			},
			// 报名
			onApply() {
				this.isModal = true

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.modal{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.c-rich {
			width: 100%;
			padding-bottom: 100rpx;

			.rich-content {
				width: 100%;
				overflow: scroll;

				::v-deep image {
					max-width: 100vw !important;
				}

				::v-deep img {
					max-width: 100vw !important;
				}
			}

			.rich-btn {
				width: 100%;
				height: 100rpx;
				padding: 20rpx 0;
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: #fff;

				&>view {
					// width: 160rpx;
					// height: 60rpx;
					width: 100%;
					font-size: 38rpx;
					font-weight: bold;
					color: #4093ec;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

	}
</style>
